import React from 'react';

interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
  checked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  className?: string;
}

const Checkbox: React.FC<CheckboxProps> = ({
  checked,
  onCheckedChange,
  className = '',
  ...props
}) => {
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    onCheckedChange?.(event.target.checked);
  };

  const baseClasses = 'peer h-4 w-4 shrink-0 rounded border-border-light dark:border-border-dark border text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50';
  const classes = `${baseClasses} ${className}`;

  return (
    <div className="relative inline-flex items-center justify-center">
      <input
        type="checkbox"
        checked={checked}
        onChange={handleChange}
        className={classes}
        {...props}
      />
      <div className="absolute inset-0 rounded border-2 border-transparent peer-focus-visible:outline-none peer-focus-visible:ring-1 peer-focus-visible:ring-primary peer-focus-visible:ring-offset-2"></div>
    </div>
  );
};

export { Checkbox };